import React,{Component,Fragment} from 'react'
import {Card,Table,Badge,Modal} from 'antd'
import axios from './../../../axios'

export default class HighTable extends Component {
    state = {
        showModal:false
    }
    params = {
        page:1
    }
    componentWillMount(){
        this.request()
    }
    request = () => {
        axios.ajax({
            url:'/table/high/list',
            data:{
                params:{
                    page:this.params.page
                }
            }
        }).then((res) => {
            if(res.code ===0 ){
                //添加key
                res.result.list.map((item,index) => {
                    return item.key = index
                })
                this.setState({
                    dataSource:res.result.list
                })
            }
        })
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            sortOrder:sorter.order
        })
    }
    handleDelete = (record,index,e) => {
        e.preventDefault();
        Modal.confirm({
            title:'确定',
            content:'你确定要删除此条数据？',
            onCancel:() => {
                this.setState({
                    showModal:false
                })
            },
            onOk:() => {
                console.log(record,index)
                console.log(record.key)
                this.setState({
                    showModal:false
                })
            }
        })
    }
    render() {
        const columns = [
            {
                title:'id',
                width:100,
                dataIndex:'id'
            },
            {
                title:'用户名',
                width:100,
                dataIndex:'userName'
            },
            {
                title:'性别',
                width:100,
                dataIndex:'sex',
                render(sex){
                    return sex ===1 ?'男':'女'
                }
            },
            {
                title:'状态',
                width:100,
                dataIndex:'state',
                render(state){
                    let config  = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },
            {
                title:'爱好',
                width:100,
                dataIndex:'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            },
            {
                title:'是否已婚',
                width:100,
                dataIndex:'isMarried',
                render(isMarried) {
                    return isMarried===1? '已婚':'未婚'
                }
            },
            {
                title:'生日',
                width:100,
                dataIndex:'birthday'
            },
            {
                title:'联系地址',
                width:500,
                dataIndex:'address'
            },
            {
                title:'早起时间',
                width:100,
                dataIndex:'time'
            }
        ]
        const columns2 = [
            {
                title:'id',
                width:200,
                fixed:'left',
                dataIndex:'id'
            },
            {
                title:'用户名',
                width:200,
                fixed:'left',
                dataIndex:'userName'
            },
            {
                title:'性别',
                width:200,
                dataIndex:'sex',
                render(sex){
                    return sex ===1 ?'男':'女'
                }
            },
            {
                title:'状态',
                width:200,
                dataIndex:'state',
                render(state){
                    let config  = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },
            {
                title:'爱好',
                width:200,
                dataIndex:'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            },
            {
                title:'是否已婚',
                width:200,
                dataIndex:'isMarried',
                render(isMarried) {
                    return isMarried===1? '已婚':'未婚'
                }
            },
            {
                title:'生日',
                width:200,
                dataIndex:'birthday'
            },
            {
                title:'联系地址',
                width:1200,
                dataIndex:'address'
            },
            {
                title:'早起时间',
                width:200,
                fixed:'right',
                dataIndex:'time'
            }
        ]
        const columns3 = [
            {
                title:'id',
                width:100,
                dataIndex:'id'
            },
            {
                title:'用户名',
                width:100,
                dataIndex:'userName'
            },
            {
                title:'年龄',
                width:100,
                dataIndex:'age',
                sorter:(a,b)=>{
                    return a.age-b.age
                },
                sortOrder:this.state.sortOrder
            },
            {
                title:'性别',
                width:100,
                dataIndex:'sex',
                render(sex){
                    return sex ===1 ?'男':'女'
                }
            },
            {
                title:'状态',
                width:100,
                dataIndex:'state',
                render(state){
                    let config  = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },
            {
                title:'爱好',
                width:100,
                dataIndex:'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            },
            {
                title:'是否已婚',
                width:100,
                dataIndex:'isMarried',
                render(isMarried) {
                    return isMarried===1? '已婚':'未婚'
                }
            },
            {
                title:'生日',
                width:100,
                dataIndex:'birthday'
            },
            {
                title:'联系地址',
                width:500,
                dataIndex:'address'
            },
            {
                title:'早起时间',
                width:100,
                dataIndex:'time'
            }
        ]
        const columns4 = [
            {
                title:'id',
                width:100,
                dataIndex:'id'
            },
            {
                title:'用户名',
                width:100,
                dataIndex:'userName'
            },
            {
                title:'性别',
                width:100,
                dataIndex:'sex',
                render(sex){
                    return sex ===1 ?'男':'女'
                }
            },
            {
                title:'状态',
                width:100,
                dataIndex:'state',
                render(state){
                    let config  = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },
            {
                title:'操作状态',
                width:100,
                dataIndex:'op_state',
                render(state){
                    let operate  = {
                        '1':<Badge status="success" text="成功"/>,
                        '2':<Badge status="processing" text="进行中"/>,
                        '3':<Badge status="default" text="正常"/>,
                        '4':<Badge status="error" text="错误"/>,
                        '5':<Badge status="warning" text="警告"/>
                    }
                    return operate[state];
                }
            },
            {
                title:'爱好',
                width:100,
                dataIndex:'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            },
            {
                title:'是否已婚',
                width:100,
                dataIndex:'isMarried',
                render(isMarried) {
                    return isMarried===1? '已婚':'未婚'
                }
            },
            {
                title:'生日',
                width:100,
                dataIndex:'birthday'
            },
            {
                title:'联系地址',
                width:500,
                dataIndex:'address'
            },
            {
                title:'早起时间',
                width:100,
                dataIndex:'time'
            },
            {
                title:'操作',
                width:200,
                render:(text,record,index) => {
                    return <a href="/delete" onClick={(e) => this.handleDelete(record,index,e)}>删除</a>
                }
            }
        ]
        return (
            <Fragment>
                <Card title="头部固定">
                    <Table 
                        bordered
                        columns = {columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{y:270}}
                    />
                </Card>
                <Card title="左侧固定">
                    <Table 
                        bordered
                        columns = {columns2}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{x:2805}}
                    />
                </Card>
                <Card title="排序">
                    <Table 
                        bordered
                        columns = {columns3}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        onChange = {this.handleChange}
                    />
                </Card>
                <Card title="操作状态">
                    <Table 
                        bordered
                        columns = {columns4}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
            </Fragment>
        )
    }
}